# 构建阶段
FROM node:18 as build-stage
# FROM: 指定基础镜像，这里使用 Node.js 16 版本
# as build-stage: 给这个构建阶段命名，便于后续引用

WORKDIR /app
#设置工作目录为 /app，后续命令都在此目录下执行

COPY package*.json ./
#COPY: 复制 package.json 和 package-lock.json 到容器的工作目录
#先复制这两个文件是为了利用 Docker 的缓存层，当依赖不变时可以直接使用缓存

RUN npm install
# 执行命令安装项目依赖

COPY . .
# 复制项目所有文件到容器中（.dockerignore 中指定的文件除外）

RUN npm run build:prod
# 执行构建命令，生成静态文件到 dist 目录

# 生产阶段
FROM nginx:stable-alpine as production-stage
# 使用轻量级的 nginx alpine 镜像作为生产环境基础
# as production-stage: 给这个阶段命名

COPY --from=build-stage /app/dist /usr/share/nginx/html
# 从构建阶段(build-stage)复制构建好的 dist 目录  复制到 nginx 默认的静态文件目录 /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf
# : 复制自定义的 nginx 配置文件(覆盖默认配置，通常用于解决 Vue 路由的 history 模式问题)

EXPOSE 80
# 声明容器运行时监听的端口（80 是 HTTP 默认端口）

CMD ["nginx", "-g", "daemon off;"]
#  容器启动时执行的命令  让 nginx 在前台运行
